<template>
    <view class="con">
    	<view class="x-con-title" v-if="title"> {{titel}} </view>
    	
    	<view class="pictureDetails" v-html="pictureDetails()" :style="isReadMore ? (more ? 'height: auto;' : 'height: ' + moreHeight + 'rpx;') : 'height: auto;'"></view>
		
    	<view v-if="isReadMore" :class="['more-box', more ? 'more-up' : 'more-down']" :style="more ? '' : 'height: ' + moreHeight + 'rpx;'" @tap="onclickMore()">
    		<view class="more-title"> {{more ? '点击收起' : '查看更多'}} </view>
    		<image class="more-ioc" :src="more ? packUp : packDown"></image>
    	</view>
    </view>
</template>

<script>
import {Base64} from '@/static/base64.min.js';
export default {
	name: 'read-more',
    data() {
        return {
			more: false,
			
			packDown: "",
			
			packUp: "",
        }
    },
    props: {
		title: {
			type: String,
			default: function(){
				return ''
			}
		},
        // 商品详情 base64 <img>标签
        intro: {
            type: String,
            default: function() {
                return 'PHA+PGltZyBzcmM9Imh0dHBzOi8vYXBwLnBlbnlhLXNwb3J0cy5jb20vYXR0YWNobWVudC9pbWFnZXMvMjAyMS8wNy8zMC9pbWFnZV8xNjI3NjE1Njg0NTI0ODk4NTAuanBnIi8+PC9wPjxwPjxpbWcgc3JjPSJodHRwczovL2FwcC5wZW55YS1zcG9ydHMuY29tL2F0dGFjaG1lbnQvaW1hZ2VzLzIwMjEvMDcvMzAvaW1hZ2VfMTYyNzYxNTY4NjU0MTAxMTAyLmpwZyIvPjwvcD48cD48aW1nIHNyYz0iaHR0cHM6Ly9hcHAucGVueWEtc3BvcnRzLmNvbS9hdHRhY2htZW50L2ltYWdlcy8yMDIxLzA3LzMwL2ltYWdlXzE2Mjc2MTU2ODk1NzEwMDUxNC5qcGciLz48L3A+PHA+PGltZyBzcmM9Imh0dHBzOi8vYXBwLnBlbnlhLXNwb3J0cy5jb20vYXR0YWNobWVudC9pbWFnZXMvMjAyMS8wNy8zMC9pbWFnZV8xNjI3NjE1NjkyOTk5ODUwNDguanBnIi8+PC9wPjxwPjxpbWcgc3JjPSJodHRwczovL2FwcC5wZW55YS1zcG9ydHMuY29tL2F0dGFjaG1lbnQvaW1hZ2VzLzIwMjEvMDcvMzAvaW1hZ2VfMTYyNzYxNTY5NTEwMjk3NTcxLmpwZyIvPjwvcD48cD48aW1nIHNyYz0iaHR0cHM6Ly9hcHAucGVueWEtc3BvcnRzLmNvbS9hdHRhY2htZW50L2ltYWdlcy8yMDIxLzA3LzMwL2ltYWdlXzE2Mjc2MTU3MDI1NDU0OTg5OS5qcGciLz48L3A+PHA+PGltZyBzcmM9Imh0dHBzOi8vYXBwLnBlbnlhLXNwb3J0cy5jb20vYXR0YWNobWVudC9pbWFnZXMvMjAyMS8wOC8wNi9pbWFnZV8xNjI4MjEzMzQ5NTM1MzQ5NTYuanBnIiB0aXRsZT0iIiBhbHQ9IiIvPjwvcD48cD48YnIvPjwvcD4='
            }
        },
		// 折叠区域展示高度，单位rpx
		moreHeight: {
			type: [Number,String],
			default: function(){
				return 1000
			}
		},
		// 是否开启 展开阅读功能
		isReadMore: {
			type: Boolean,
			default: function(){
				return true
			}
		}
    },
    watch:{
        intro(val){
            this.intro = val;
        }
    },
    mounted() {},
    methods: {
        /* 将详情base64图片转换成HTML */
        pictureDetails: function(){
        	let htmlStr = Base64.decode(this.intro);
        	return htmlStr.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" ');
        },
		/* 展开与收起 */
		onclickMore(){
			this.more = !this.more;
		}
    }
}
</script>

<style lang="scss" scoped>
	.con{position: relative;}
	
    .x-con-title{height: 100rpx;line-height: 100rpx;background-color: #FFFFFF;text-align: center;font-size: 32rpx;}
    
    .pictureDetails{width: 100vw;font-size: 0; height: 1000rpx;overflow-y: hidden;}
    
    .more-box{width: 100%;display: flex;justify-content: center;align-items: center;}
    
    .more-down{background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);height: 1000rpx;padding-bottom: 20rpx;position: absolute;bottom: 0;align-items: flex-end;}
    .more-up{background: #FFFFFF;height: 100rpx;}
    
    .more-title{font-size: 32rpx;color: #219afc;}
    .more-ioc{width: 42rpx;height: 42rpx;margin-left: 16rpx;}
</style>
